<template>
    <view class="wrap">
        <Template0 :templateStatus="templateStatus" v-if="vuex_templateData.code === 'template0'"></Template0>
        <Template1 :templateStatus="templateStatus" v-if="vuex_templateData.code === 'template1'"></Template1>
        <!-- 音乐按钮 -->
        <view class="music-wrap" v-if="vuex_music.url && templateStatus !== 'make'"><MusicBtn :src="vuex_music.url" :playStatus="playStatus"></MusicBtn></view>
        <!-- 底部操作栏 -->
        <view class="view-info-wrap" v-if="!showShareMenu && vuex_worksId">
            <ViewInfoWrap
                @complete="complete"
                @edit="edit"
                @toggleLike="toggleLike"
                @share="onShowShareMenu"
                :worksId="vuex_worksId"
                :role="templateStatus"
                :sharedInfo="sharedInfo"
            ></ViewInfoWrap>
        </view>
        <!-- 分享到好友和朋友圈 -->
        <view class="share-menu-wrap" v-if="showShareMenu"><ShareMenu @cancel="cancel" @shareType="onshareType"></ShareMenu></view>
    </view>
</template>
<script>
import Template0 from '../components/template/Template0.vue';
import Template1 from '../components/template/Template1.vue';
import { MusicBtn } from '@/components/MusicBtn/index.vue';
import ViewInfoWrap from '../components/ViewInfoWrap.vue';
import ShareMenu from '../components/ShareMenu.vue';

import { createWorks, editWorks } from '@/api/works.js';
export default {
    name: '',
    data() {
        return {
            showShareMenu: false
        };
    },
    props: {
        // 当前查看的权限
        templateStatus: {
            type: String,
            default: ''
        },
        sharedInfo: {
            type: Object,
            default: function() {
                return {};
            }
        },
        playStatus: {
            type: Boolean,
            default: true
        }
    },
    computed: {},
    created() {},
    methods: {
        // 完成
        complete() {
            this.$u.vuex('vuex_worksId', '');
            uni.navigateBack({
                delta: 3
            });
        },
        // 编辑
        edit() {
            this.$u.route({
                type: 'redirectTo',
                url: '/pages/compoundPages/makeWorks/makeWorks'
            });
            this.$emit('edit');
        },
        // 点赞和取消点赞
        toggleLike() {
            this.$emit('toggleLike');
        },
        // 分享
        onShowShareMenu() {
            this.showShareMenu = true;
        },
        // 取消
        cancel() {
            this.showShareMenu = false;
        }
    },
    watch: {},
    components: { Template0, Template1, MusicBtn, ShareMenu, ViewInfoWrap }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 66;
    .music-wrap {
        position: fixed;
        right: 30rpx;
        top: 30rpx;
        width: 58rpx;
        height: 58rpx;
        z-index: 100;
    }
    .view-info-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 750rpx;
        height: 160rpx;
        z-index: 100;
    }
}
</style>
